/* eslint-disable no-unused-vars */
import React, { useEffect, useState } from "react";
import './launchmode2.css';
import { useHistory } from "react-router-dom/cjs/react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import DownloadProcessBar from "@/components/DownloadProcessBar/downloadProcessBar";
import NavigateBar from "@/components/NavigateBar";

import icon_banner2_mode1 from "@/assets/icon_banner2_mode1.jpg"
import icon_banner2_mode2 from "@/assets/icon_banner2_mode2.jpg"
import icon_banner2_mode3 from "@/assets/icon_banner2_mode3.jpg"
import icon_banner2_mode4 from "@/assets/icon_banner2_mode4.jpg"
import icon_banner2_mode5 from "@/assets/icon_banner2_mode5.jpg"

// import icon_banner2_mode1 from "@/assets/icon_banner2_mode1_xaf.jpg"
// import icon_banner2_mode2 from "@/assets/icon_banner2_mode2_xaf.jpg"
// import icon_banner2_mode3 from "@/assets/icon_banner2_mode3_xaf.jpg"
// import icon_banner2_mode4 from "@/assets/icon_banner2_mode4_xaf.jpg"
// import icon_banner2_mode5 from "@/assets/icon_banner2_mode5_xaf.jpg"

import icon_logo1 from "@/assets/icon_logo1@2x.png"
import icon_about_arrow from '@/assets/icon_about_arrow@2x.png'

import { saveEvent } from "@/store/actions/saveEvent";
import { LangStore } from "@/utils/langStore";

import { LangEnGhs } from "@/utils/langEnGhs";
import { LangEnKes } from "@/utils/langEnKes";
import { LangEnUgx } from "@/utils/langEnUgx";
import { LangFrFcfa } from "@/utils/langFrFcfa";
import { LangFrXaf } from "@/utils/langFrXaf";


/**
 * 落地页-1
 */
export default function LaunchMode2Download() {

    // 获取路由历史 history 对象
    const history = useHistory()

    // 文案翻译
    const [curLang, setCurLang] = useState(LangEnGhs);

    // 文案翻译
    const [curAppStore, setCurAppStore] = useState(LangStore);

    // 是否在下载
    const [isDownloading, setIsDownloading] = useState(false);

    //获取 Redux 分发器
    const dispatch = useDispatch()

    const banners = [icon_banner2_mode2, icon_banner2_mode3, icon_banner2_mode4, icon_banner2_mode5, icon_banner2_mode1]
    // const banners = [icon_banner2_mode2, icon_banner2_mode3]

    // const items = banners.map((banner, index) => (
    //     <Swiper.Item key={index}>
    //         <div className="launchmode2SwiperItemContent">
    //             <img className="launchmode2SwiperItemImage" src={banner} alt="" />
    //         </div>
    //     </Swiper.Item>
    // ))

    const items = banners.map((banner, index) => (
        // <Swiper.Item key={index}>
        // <div className="launchmode2SwiperItemContent" key={index}>
        //     <img className="launchmode2SwiperItemImage" src={banner} alt="" />
        // </div>
        // </Swiper.Item>


        <img className="launchmode2SwiperItemImageSelf" src={banner} alt="" key={index} />
    ))

    //点击下载
    const onHandleInstallClick = () => {
        //Initializing Smart Script arguments
        // let oneLinkURL = "https://rpidecredit.onelink.me/QIup";
        // let mediaSource = { keys: ["incoming_fb"], defaultValue: "Facebook_H5_Install" };
        // let campaign = { keys: ["incoming_campaign"], defaultValue: "any_campaign_name" };
        // let adSet = { keys: ["incoming_adset"], defaultValue: "any_adset_name" };
        // let ad = { keys: ["incoming_ad"], defaultValue: "any_ad_name" };
        // let channel = { keys: ["incoming_channel"], defaultValue: "any_video" };
        // let googleClickIdKey = "af_sub2";
        // let afSub1 = { keys: ["fbclid"] };
        // let custom_ss_ui = { paramKey: "af_ss_ui", defaultValue: "true" };

        // //Call the function after embedding the code through a global parameter on the window object called window.AF_SMART_SCRIPT.
        // //Onelink URL is generated.
        // let result = window.AF_SMART_SCRIPT.generateOneLinkURL({
        //     oneLinkURL: oneLinkURL,
        //     afParameters: {
        //         mediaSource: mediaSource,
        //         campaign: campaign,
        //         adSet: adSet,
        //         ad: ad,
        //         channel: channel,
        //         googleClickIdKey: googleClickIdKey,
        //         afSub1: afSub1,
        //         afCustom: [
        //             custom_ss_ui
        //         ]
        //     }
        // });

        // //非空才能跳转
        // if (!result) {
        //     return
        // }
        // //真实url
        // const resultUrl = result.clickURL
        // if (!resultUrl) {
        //     return
        // }
        // window.location.href = result.clickURL;

        //打点
        doHitEvent("INSTALL_CLICK")

        // 设置下载中
        setIsDownloading(true)

        let apkUrl = "https://afglobal.obs.af-south-1.myhuaweicloud.com/kml/grizzlycash_r34.apk"
        window.location.href = apkUrl;

        // window.open(apkUrl, "_blank")
    }

    //点击下载
    const onHandleInstallClickForCY = () => {
        //打点
        doHitEvent("INSTALL_CLICK")

        // 设置下载中
        setIsDownloading(true)


        //调用客户端下载产品
        var value = 's_91bc0f6aadc6448f8fe4fdce4c415238';
        var name = 'MovieBox-Free downloader of Movies, TV & Music';
        var detailType = 'SOFT';
        var packageName = 'com.petrie.ridipa';
        var version = '102000';
        var size = '';
        callPalmplayApk(value, name, detailType, packageName, version, size)
    };

    const callPalmplayApk = (value, name, detailType, packageName, version, size) => {

        // var callClientDownUrl = 'http://ind-android.palmplaystore.com';
        // var clinetUrl='palmplay://download/?itemID='+value+'&name='+name+'&packageName='+packageName+'&version='+version+'&size='+size+'&price=0'+'&detailType='+detailType+'&shareChannel=0&platform=2';
        // palmplay://download/?itemID=s_1fbb3e557d7e4017991251ce4316ede7&name=Scooper News：Trending & Viral&packageName=com.hatsune.eagleee&version=9009115&size=&price=0&detailType=SOFT&shareChannel=0&platform=2
        // palmplay://thirdlauncher.com/?entryType=AppDetail&detailType=SOFT&utm_source=pushsdk&_source=psh5&packageName=com.opera.mini.native
        var clinetUrl = 'palmplay://thirdlauncher.com/?entryType=AppDetail&detailType=SOFT&utm_source=pushsdk&_source=psh5&packageName=' + packageName;
        // var webUrl = callClientDownUrl + '/api/share_download_apk/?itemID=' + value + '&shareChannel=0&platform=2';
        let webUrl = "https://afglobal.obs.af-south-1.myhuaweicloud.com/kml/grizzlycash_r34.apk"
        whetherDownloadClient(clinetUrl, webUrl);
    };

    const whetherDownloadClient = (clinetUrl, webUrl) => {
        console.log(clinetUrl);
        var timeout, t = 1000, hasApp = true;
        setTimeout(function () {
            if (hasApp) {
            } else {
                if (webUrl !== '') {
                    //跳转到Wap相应页面
                    window.location.href = webUrl;
                }
                return false;
            }

            if (ua.indexOf('Chrome') === -1)
                document.body.removeChild(ifr);
        }, 2000);

        var t1 = Date.now();
        var ua = navigator.userAgent;
        if (ua.indexOf('Chrome') !== -1) {
            // document.hidden = true;
            document.body.style.display = 'none';

            setTimeout(() => {
                // document.hidden = false;
                document.body.style.display = 'block';

                window.location = clinetUrl;
            }, 0)
        }
        else {
            var ifr = document.createElement("iframe");
            ifr.setAttribute('src', clinetUrl);
            ifr.setAttribute('style', 'display:none');

            document.body.appendChild(ifr);
        }

        setTimeout(function () {
            var t2 = Date.now();
            if (ua.indexOf("FB") === -1) {//非Facebook浏览器
                if (!t1 || t2 - t1 < t + 200) {
                    hasApp = false;
                }
            } else {//Facebook浏览器
                hasApp = false;
            }
        }, t);
    }

    // 下载动画完成
    const onHandleDownloadProcessFinish = () => {
        setIsDownloading(false);
    }


    //打点接口
    const doHitEvent = async (type, remark = "") => {
        console.log("doHitEvent: " + type + " , " + remark);

        try {
            //获取Action
            const action = saveEvent(type, remark)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    //启动时请求用户状态
    useEffect(() => {
        //添加 fb 像素
        // eslint-disable-next-line no-undef
        // fbq('track', 'Page_Apply');
        // eslint-disable-next-line no-undef
        // gtag('track', 'Page_Download');

        const isAreaGhana = process.env.REACT_APP_AREA_GHANA;
        const isAreaKenya = process.env.REACT_APP_AREA_KENYA;
        const isAreaUganda = process.env.REACT_APP_AREA_UGANDA;
        const isAreaCameroon = process.env.REACT_APP_AREA_CAMEROON;
        const isAreaCotediva = process.env.REACT_APP_AREA_COTEDIVA;

        console.log('=====当前配置地区-GHANA: ' + isAreaGhana);
        console.log('=====当前配置地区-KENYA: ' + isAreaKenya);
        console.log('=====当前配置地区-UGANDA: ' + isAreaUganda);
        console.log('=====当前配置地区-CAMEROON: ' + isAreaCameroon);
        console.log('=====当前配置地区-COTEDIVA: ' + isAreaCotediva);

        // 配置显示
        if (isAreaGhana === "1") {
            //加纳
            setCurLang(LangEnGhs);

        } else if (isAreaKenya === "1") {
            //肯尼亚
            setCurLang(LangEnKes);

        } else if (isAreaUganda === "1") {
            //乌干达
            setCurLang(LangEnUgx);

        } else if (isAreaCameroon === "1") {
            //喀唛隆
            setCurLang(LangFrXaf);

        } else if (isAreaCotediva === "1") {
            //科特
            setCurLang(LangFrFcfa);

        } else {
            //加纳
            setCurLang(LangEnGhs);
        }

        //打点
        doHitEvent("launchmode2download_START")

        // 设置语言
        // var language = "en";
        // let timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        // console.log("timeZone:" + timeZone);
        // console.log("language:" + language);

        //加纳 单包
        setCurLang(LangEnUgx);

        // 直接下载
        onHandleInstallClick();

        return () => {
            //打点
            doHitEvent("launchmode2download_END")
        }
    }, [])

    return (
        <div className="launchmode2Root">
            <NavigateBar theme="transparent" onAddFavorite={() => { }} onAddHome={() => { }}></NavigateBar>

            {/* app 图标 */}
            <div className="launchmode2RowGlobalPadding">
                <img className="launchmode2AppLogo" src={icon_logo1} alt="" />

                <div className="launchmode2ColumnFullRight launchmode2PaddingLeft16Px">
                    <span className="launchmode2AppName">{curLang.appName}</span>
                    <span className="launchmode2AppOwner launchmode2MarginTop5Px">{curLang.appDev}</span>
                </div>
            </div>

            {/* 评价、下载量 */}
            <div className="launchmode2RowGlobalPadding launchmode2MarginTop32Px launchmode2FlexCenter">
                <div className="launchmode2ColumnStoreItem">
                    <div className="launchmode2StoreText">{curAppStore.appReviewStar}</div>
                    <div className="launchmode2StoreTips launchmode2MarginTop5Px">{curAppStore.appReviewCount} {curLang.reviews}</div>
                </div>

                {/* <div className="launchmode2Space22Px"></div> */}

                <div className="launchmode2ColumnStoreItem">
                    <div className="launchmode2StoreText">{curAppStore.appDownloadCount}</div>
                    <div className="launchmode2StoreTips launchmode2MarginTop5Px">{curLang.downloads}</div>
                </div>

                {/* <div className="launchmode2Space22Px"></div> */}

                <div className="launchmode2ColumnStoreItem">
                    <div className="launchmode2StoreTextAgeLimit">{curAppStore.appAgeLimit}</div>
                    <div className="launchmode2StoreTips launchmode2MarginTop5Px">{curLang.ratedFor3Plus}</div>
                </div>
            </div>

            {/* 跳转应用市场 */}
            {!isDownloading && <div className="launchmode2RowGlobalPadding launchmode2FlexCenter launchmode2MarginTop42Px launchmode2Padding26Px">
                <div className="launchmode2BtnInstall" onClick={onHandleInstallClick}>
                    <div className="launchmode2InstallText">{curLang.toInstall}</div>
                </div>
            </div>}

            {isDownloading && <div className="launchmode2RowGlobalPadding launchmode2FlexCenter launchmode2MarginTop42Px launchmode2Padding26Px">
                <DownloadProcessBar onAnimationFinish={() => { onHandleDownloadProcessFinish() }} />
            </div>}

            {/* banner */}
            <div className="launchmode2RowGlobalPadding launchmode2MarginTop60Px">
                <div className="launchmode2SwiperContent">
                    {/* <Swiper
                        indicator={() => null}
                        defaultIndex={0}>
                        {items}
                    </Swiper> */}
                    {items}
                </div>
            </div>

            {/* 申请步骤 */}
            <div className="launchmode2RowGlobalPadding launchmode2MarginTop17Px">
                <div className="launchmode2StepTitle">{curLang.aboutThisApp}</div>
                <img className="launchmode2StepIcon" src={icon_about_arrow} alt="" onClick={onHandleInstallClick} />
            </div>

            {/* 申请步骤 */}
            <div className="launchmode2RowGlobalPadding launchmode2FlexCenter launchmode2MarginTop10Px">
                <div className="launchmode2StepText">
                    {curLang.appStoreListingRow1}<br></br>
                    {curLang.appStoreListingRow2}<br></br>
                    {curLang.appStoreListingRow3}<br></br>
                    {curLang.appStoreListingRow4}<br></br>
                    {curLang.appStoreListingRow5}<br></br>
                    {curLang.appStoreListingRow6}<br></br>
                </div>
            </div>

            {/* 申请步骤 */}
            <div className="launchmode2ColumnGlobalPadding launchmode2MarginTop14Px">
                <div className="launchmode2StepTitle launchmode2FontSize14px">{curLang.updatedOn}</div>
                <div className="launchmode2StepText launchmode2FontColorUpdate launchmode2MarginTop5Px">{curLang.updatedDate}</div>
            </div>

            {/* 标签 */}
            <div className="launchmode2RowGlobalPadding launchmode2MarginTop28Px">
                <div className="launchmode2CateTag">{curLang.topFreeFinance}</div>
                <div className="launchmode2Space11Px"></div>
                <div className="launchmode2CateTag">{curLang.finance}</div>
            </div>

            {/* 底部标签 */}
            <div className="launchmode2Space11Px launchmode2MarginTop42Px"></div>

        </div>
    )
}